<template>
  <div class="page has-navbar" v-nav="{ title: videoInfo.liveTitle, showBackButton: true, onBackButtonClick: back }">
    <div class="page-content text-center" style="padding-top:44px">

      <!-- 页面主体内容 -->
      <div id="video-room">
        <my-video :video-info="videoInfo"></my-video>

        <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>

        <!-- 模块 -->
        <div class="models">
          <chat ref="chat" v-show="tabIndex===0"></chat>
          <rank ref="rank" v-show="tabIndex===1" :is-show="tabIndex===1"></rank>
        </div>
      </div>
      <!-- 页面主体内容 -->

    </div>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    VIDEO_SERVER
  } from "tools/config";
  import chat from "components/chat/chat";
  import myVideo from "components/video/myVideo";
  import rank from "components/rank/rank";

  export default {
    name: "videoRoom",
    components: {
      chat,
      myVideo,
      rank,
    },
    data() {
      return {
        //功能模块配置表
        tabs: ["互动", "排行榜"],
        tabIndex: 0,
      };
    },
    mounted() {
      //   this.videoInfo = this.$route.params;
      this.saveRecentVideo()
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'videoInfo',
      ])
    },
    methods: {
      back() {
        this.$refs.chat.disconnect()
        $router.back('/');
      },
      onTabClick(index) {
        this.tabIndex = index;
      },
      //存储最近观看的直播
      saveRecentVideo() {
        setTimeout(() => {
          this.$ajax.post('/video/recent?userId=' + this.userInfo.id, this.videoInfo);
        }, 2000)
      }
    }
  };

</script>
<style lang="scss">
  .tabs {
    position: static;
  }

  #video-room {
    display: flex;
    flex-direction: column;
    height: 100%;
    div.models {
      padding-top: 10px;
      flex: 1;
      position: relative;
    }
  }

</style>
